<template>
    <div class="a">
        <div class="demo-progress">
            <el-progress type="dashboard" :percentage="percentage" :color="colors" />
        </div>
    </div> 
</template>
<style scoped>
.a{
    flex: auto;
    margin-top: 70px;
    background-color: palevioletred;
}
</style>

<script setup>
import {onMounted, ref } from 'vue';

const percentage = ref(0)
const colors = [
    { color: '#f56c6c', percentage: 20 },
    { color: '#e6a23c', percentage: 40 },
    { color: '#5cb87a', percentage: 60 },
    { color: '#1989fa', percentage: 80 },
    { color: '#6f7ad3', percentage: 100 },
]

onMounted(() => {
    setInterval(() => {
      percentage.value = (percentage.value % 100) + 10
    }, 500)
})
</script>
  
  